<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useArticleState } from '../../../swy-hook/index.js'
import { getcateListApi2 } from '../../../api/cate'
import imgupload from '../../../components/ZXSimg'
import { addarticleApi, editarticleApi, getarticleInfoApi } from '../../../api/article'
import { ElMessage } from "element-plus";
import swyQuill from '../../../components/quill/swy-quill.vue';
const quill = ref()
const emit = defineEmits(["updateList"]);
const ArticleList = useArticleState(true)
const getcatenameList = ref([])
// 表单数据
const defaultState = {
    cate_id: '',
    title: '',
    status: '',
    create_time: '',
    pic_url: '',
    content: '',
    id: null
}
const changeInput = (val) => {
    formData.content = val
}
// 表单提交
const onSubmit = async () => {
    try {
        // 1. 校验数据
        await formRef.value.validate();
        // 2. 整理数据
        // 3. 提交数据
        const data = toRaw(formData);
        formData.id ? await editarticleApi(data) : await addarticleApi(data)
        // 4. 提示成功
        ElMessage.success("操作成功");
        // 5. 关闭
        drawer.value = false;
        // 6. 列表更新
        emit("updateList");
    } catch (error) {
        console.log(error);
    }
};
// 回显数据
const replyData = async (id) => {

    let res = await getarticleInfoApi(id)
    console.log(res.data);
    Object.assign(formData, res.data)
    // formData:res.data.data.catename
    drawer.value = true
}
// 标题
const title = computed(() => {
    return formData.id ? '修改咨询' : '新增咨询'
})
// 获取文章分类
const initData = async () => {
    let { data } = await getcateListApi2()
    // console.log(data);
    getcatenameList.value = data
}
const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
    cate_id: [{ required: true, message: "请选择", trigger: "change" }],
    pic_url: [{ required: true, message: "请上传图片", trigger: "change" }],
    title: [{ required: true, message: "请输入", trigger: "blur" }],
    content: [{ required: true, message: "请输入", trigger: "blur" }],
};
// 表单ref引用
const formRef = ref();
// 弹框控制变量
const drawer = ref(false)
// 关闭事件
const closeHandler = () => {
    // 移除校验
    formRef.value.resetFields()
    // 重置表单数
    Object.assign(formData, { ...defaultState })
    // formData.content=''
};
const handleChange = (value) => {
    //   console.log(value)
}
defineExpose({
    drawer, replyData
});
onMounted(() => {
    initData()
})
</script>

<template>
    <el-drawer @close="closeHandler" size="45%" v-model="drawer" :title="title">

        <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px" :inline="false"
            label-position="top">

            <el-row :gutter="20"> 
                <el-col :span="11">
                    <el-form-item label="文章标题" prop="title">
                <el-input  v-model="formData.title"></el-input>
            </el-form-item>
                </el-col>
                <el-col :span="9">
                  
            <el-form-item label="文章分类" prop="cate_id">
                <el-select size="medium" placeholder="请选择" v-model="formData.cate_id" clearable>
                    <el-option v-for="item in getcatenameList" :key="item.id" :label="item.catename"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
                </el-col>
            </el-row>
        

            <el-row :gutter="20"> 
                <el-col :span="6">
                    <el-form-item label="文章状态">
                <el-radio-group v-model="formData.status">
                    <el-radio v-for="(item, index) in ArticleList"  :key="index" :label="item.value" size="large">
                        {{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
                </el-col>

                <el-col :span="14">
                
            <el-form-item style="margin-left: 140px;" label="文章封面" prop="pic_url">
                <imgupload v-model="formData.pic_url" :type="'adv'"></imgupload>
            </el-form-item>

                </el-col>
            </el-row>

            

            <el-form-item label="文章内容" prop="content">
                <swy-quill :value="formData.content" :min-height="192" @update:input="changeInput"></swy-quill>

            </el-form-item>
        
        </el-form>
        <template #footer>
                <div style="flex: auto">
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button @click="onSubmit" type="primary">确定</el-button>
                </div>
            </template>
    </el-drawer>
</template>

<style scoped></style>